.data-reports-container {
  padding: 0;
  background: #f5f7fa;
  min-height: calc(100vh - 64px);

  // 报告头部
  .report-header {
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        display: flex;
        align-items: center;
        gap: 16px;

        .header-icon {
          font-size: 48px;
          color: #1890ff;
        }

        .header-info {
          h2 {
            font-size: 24px;
            font-weight: 600;
            color: #262626;
            margin: 0 0 4px 0;
          }

          p {
            font-size: 14px;
            color: #8c8c8c;
            margin: 0;
          }
        }
      }

      .header-right {
        .ant-btn-primary {
          background: #1890ff;
          border-color: #1890ff;
          box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);

          &:hover {
            background: #40a9ff;
            border-color: #40a9ff;
            box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
          }
        }
      }
    }
  }

  // 核心指标
  .core-metrics {
    margin-bottom: 16px;

    .metric-card {
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .ant-statistic {
        .ant-statistic-title {
          font-size: 14px;
          color: #8c8c8c;
          margin-bottom: 8px;
        }

        .ant-statistic-content {
          display: flex;
          align-items: center;
          gap: 8px;

          .ant-statistic-content-prefix {
            font-size: 24px;
            color: #1890ff;
          }

          .ant-statistic-content-value {
            font-size: 28px;
            font-weight: 600;
            color: #262626;
          }

          .ant-statistic-content-suffix {
            .growth-tag {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              font-size: 14px;
              font-weight: 500;
              padding: 2px 8px;
              border-radius: 4px;

              &.positive {
                color: #52c41a;
                background: #f6ffed;
              }

              &.negative {
                color: #ff4d4f;
                background: #fff1f0;
              }
            }
          }
        }
      }
    }
  }

  // 数据卡片
  .data-card {
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: 100%;

    .ant-card-head {
      border-bottom: 1px solid #f0f0f0;

      .ant-card-head-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }
    }

    .ant-card-body {
      height: calc(100% - 57px);
    }

    .ant-table {
      .ant-table-thead > tr > th {
        background: #fafafa;
        font-weight: 600;
        color: #262626;
        border-bottom: 2px solid #f0f0f0;
      }

      .ant-table-tbody > tr {
        transition: all 0.3s ease;

        &:hover {
          background: #f5f7fa;

          td {
            background: transparent;
          }
        }

        td {
          border-bottom: 1px solid #f5f5f5;
        }
      }

      .ant-tag {
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 12px;
        border: none;
      }
    }
  }

  // 数据洞察
  .insights-card {
    margin-top: 16px;
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .ant-card-head {
      border-bottom: 1px solid #f0f0f0;

      .ant-card-head-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }
    }

    .insight-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 16px;
      background: #fafafa;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        background: #f0f0f0;
        transform: translateY(-2px);
      }

      .insight-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;

        &.positive {
          background: #f6ffed;
          color: #52c41a;
        }

        &.negative {
          background: #fff1f0;
          color: #ff4d4f;
        }

        &.warning {
          background: #fffbe6;
          color: #faad14;
        }
      }

      .insight-content {
        flex: 1;

        h4 {
          font-size: 16px;
          font-weight: 600;
          color: #262626;
          margin: 0 0 8px 0;
        }

        p {
          font-size: 14px;
          color: #595959;
          margin: 0;
          line-height: 1.6;
        }
      }
    }
  }

  // 报告说明
  .report-notes {
    margin-top: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #262626;
      margin: 0 0 16px 0;
    }

    ul {
      margin: 0;
      padding-left: 20px;

      li {
        font-size: 14px;
        color: #595959;
        line-height: 2;
        list-style-type: disc;
      }
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .core-metrics {
      .ant-row {
        .ant-col {
          margin-bottom: 16px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 16px;

    .report-header {
      .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;

        .header-left {
          .header-icon {
            font-size: 36px;
          }

          .header-info {
            h2 {
              font-size: 20px;
            }

            p {
              font-size: 13px;
            }
          }
        }

        .header-right {
          .ant-space {
            width: 100%;
            flex-wrap: wrap;

            .ant-space-item {
              width: 100%;

              .ant-select,
              .ant-picker,
              .ant-btn {
                width: 100% !important;
              }
            }
          }
        }
      }
    }

    .core-metrics {
      .ant-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
      }
    }

    .ant-row {
      .ant-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 16px;
      }
    }

    .insights-card {
      .ant-row {
        .ant-col {
          margin-bottom: 16px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .insight-item {
        .insight-icon {
          width: 40px;
          height: 40px;
          font-size: 20px;
        }

        .insight-content {
          h4 {
            font-size: 15px;
          }

          p {
            font-size: 13px;
          }
        }
      }
    }
  }

  @media (max-width: 480px) {
    .core-metrics {
      .metric-card {
        .ant-statistic {
          .ant-statistic-content {
            .ant-statistic-content-prefix {
              font-size: 20px;
            }

            .ant-statistic-content-value {
              font-size: 24px;
            }

            .ant-statistic-content-suffix {
              .growth-tag {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
